<template>
  <div class="about">
    <!-- <h1>This is an about page</h1> -->
    <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-card v-for="(item,index) in top" :key="index" :title="item.deliveryMsg" :thumb="item.shopPic">
      <template #desc>
        <span>{{item.distance}}</span>
      </template>
    </van-card>

    <van-tabs v-model="active">
      <van-tab title="点菜">
        <!-- 左右布局 -->
        <div class="second">
          <van-row>
            <van-col span="8">
              <div class="good_left">
                <div class="good_left_box" v-for="(item,index) in obj.data.categoryList" :key="index"
                :class="indexs==index?'active':''"  @click="showNavtwo(index)">{{item.categoryName}}</div>
              </div>
            </van-col>
            <van-col span="16">
              <div class="good_right">
                <van-card v-for="(item,index) in nav2" :key="index" :price="item.originPrice" :title="item.spuName"
                  :thumb="item.littleImageUrl">
                  <!-- 加入购物车 -->
                  <template #num>
                    <!-- 步进器 -->
                    <van-stepper v-model="item.num" theme="round" button-size="22" disable-input
                      @change="getnum(item)" />
                  </template>
                </van-card>
              </div>
              <!-- </div> -->
            </van-col>
          </van-row>
        </div>
      </van-tab>
      <van-tab title="评价">评价</van-tab>
      <van-tab title="商家">商家</van-tab>
    </van-tabs>

    <!-- 底部购物车 -->
    <div class="last">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="showPopup" />
        <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
          <!-- 弹出层里的商品卡片 -->
          <van-card v-for="(item,index) in cartList" :key="index" :num="item.num" :price="item.originPrice" desc="描述信息"
            :title="item.spuName" :thumb="item.littleImageUrl">
            <template #num>
              <!-- 步进器 -->
              <van-stepper v-model="item.num" theme="round" button-size="22" disable-input @change="getnum(item)" />
            </template>
          </van-card>
          <!-- 弹出层里的商品卡片里面的步进器 -->
        </van-popup>
        <span>总价:{{total}}</span>
        <van-goods-action-button type="danger" text="去结算" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        top: [], //顶部
        nav: [], //左边
        obj: "", //所有数据
        active: 0,
        value: "0",
        show: false,
        cartList: [],
        nav2: [],
        list1: [],
        indexs:0

      };
    },
    computed: {
      total() {
        let money = 0;
        this.cartList.map((item) => {
          money += item.originPrice * item.num;
        });
        return money;
      },
    },
    methods: {
      getnum(item) {
        console.log(item);
        console.log(11111);
        let aa = true;
        this.cartList.map((ele) => {
          if (ele.spuId == item.spuId) {
            ele.num = item.num;
            aa = false;
          }
        });
        if (aa) {
          this.cartList.push(item);
          // console.log(this.cartList);
        }
        localStorage.cartList = JSON.stringify(this.cartList);
      },
      onClickLeft() {
        window.history.back();
      },
      showPopup() {
        //点击弹出层
        this.show = true;
      },
      showNavtwo(index) { //点击左边显示右边
        this.nav2 = this.list1[0].data.categoryList[index].spuList
        this.indexs = index
      }

    },
    created() {
      let id = this.$route.query.id;

      console.log(id);
      this.$axios.get("http://localhost:8080/shopdetails.json").then((res) => {
        // console.log(res.data);

        this.list1 = res.data;
        this.nav2 = res.data[0].data.categoryList[0].spuList
        console.log(this.nav2);
        this.list1.map((item) => {
          if (item.data.mtWmPoiId === id) {
            // console.log(item);
            this.obj = item;
            this.top.push(item.data.shopInfo); //顶部商店信息
          }
        });
      });
    },
  };
</script>

<style scoped>
  .good_left {
    width: 100%;
    height: 90vh;
  }

  .good_left_box {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .active {
    color: red;
  }

  .good_right {
    width: 100%;
    height: 90vh;
    overflow: scroll;
  }

  .good_right_box {
    width: 100%;
    border: 1px solid blue;
  }
</style>